import { ProFormRadio, ProFormText, ProFormItem, ProFormDependency } from '@ant-design/pro-form';
import { Button, Space } from 'antd';
import { values } from 'lodash';
import ColorPicker from '@/components/ColorPicker';
import { UPLOAD_FOLDER } from '@/constants/global.const';

import type { PageSettingValue } from '..';
import { TPL_TYPE, rules, NAV_TYPE, NAV_BG_TYPE, BG_TYPE, initialValues, SCROLL_TYPE } from '..';
import { wrapperValidate } from '../../utils';
import ImageRadio from '../../../costomFields/imageRadio';
import type { WrapperFormRef } from '../../wrapperForm';
import WrapperForm from '../../wrapperForm';
import CommonUpload from '@/components/CommonUpload';
import { useRef } from 'react';

interface IPageFormProps {
  data: PageSettingValue;
}

const PageForm: React.FC<IPageFormProps> = (props) => {
  const ref = useRef<WrapperFormRef<PageSettingValue>>(null);
  const onChangeHandle = (changeVal: Partial<PageSettingValue>, allVal: PageSettingValue) => {
    if (
      !!changeVal.tplType &&
      changeVal.tplType !== TPL_TYPE.normal.value &&
      allVal?.bgType !== BG_TYPE.color.value
    ) {
      return {
        ...changeVal,
        bgType: BG_TYPE.color.value,
      };
    }
    return changeVal;
  };

  return (
    <WrapperForm<PageSettingValue>
      reducerName="updatePageSetting"
      ref={ref}
      {...props}
      onBeforeUpdate={onChangeHandle}
    >
      <ProFormText label="页面标题" name="title" placeholder="请输入页面标题" rules={rules.title} />
      <ProFormRadio.Group
        label="导航设置"
        name="navType"
        options={values(NAV_TYPE)}
        required
        rules={rules.navType}
      />
      <ProFormDependency name={['navType']}>
        {({ navType }) => {
          if (navType === 'normal') {
            return (
              <>
                <ProFormRadio.Group
                  label="顶部主题色"
                  name="navBgType"
                  options={values(NAV_BG_TYPE)}
                  required
                  rules={rules.navBgType}
                />
                <ProFormDependency name={['navBgType']}>
                  {(value, formRef) => {
                    const { navBgType } = value;
                    return (
                      <Space align="center">
                        {navBgType === NAV_BG_TYPE.custom.value && (
                          <Button
                            type="link"
                            onClick={() => {
                              formRef.setFieldValue('navBgColor', initialValues.navBgColor);
                              ref.current?.update({
                                navBgColor: initialValues.navBgColor,
                              });
                            }}
                          >
                            重置
                          </Button>
                        )}
                        <ProFormItem name="navBgColor" noStyle>
                          <ColorPicker readonly={navBgType === NAV_BG_TYPE.normal.value} showText />
                        </ProFormItem>
                      </Space>
                    );
                  }}
                </ProFormDependency>
                <ProFormItem label="选择模板" name="tplType" required rules={rules.tplType}>
                  <ImageRadio options={values(TPL_TYPE)} />
                </ProFormItem>
              </>
            );
          } else {
            return null;
          }
        }}
      </ProFormDependency>

      <ProFormDependency name={['tplType']}>
        {({ tplType }) => {
          const options = values(BG_TYPE).map((item) => ({
            ...item,
            disabled: item.value !== BG_TYPE.color.value && tplType !== TPL_TYPE.normal.value,
          }));
          return (
            <ProFormRadio.Group
              label="背景设置"
              name="bgType"
              options={options}
              required
              rules={rules.bgType}
            />
          );
        }}
      </ProFormDependency>

      <ProFormDependency name={['bgType']}>
        {({ bgType }) => {
          if (bgType === BG_TYPE.color.value) {
            return (
              <ProFormItem name="bgColor" required>
                <ColorPicker showText />
              </ProFormItem>
            );
          }
          if (bgType === BG_TYPE.gradient.value) {
            return (
              <>
                <ProFormItem label="开始颜色" name={['bgColorRange', 0]} required>
                  <ColorPicker showText />
                </ProFormItem>
                <ProFormItem label="结束颜色" name={['bgColorRange', 1]} required>
                  <ColorPicker showText />
                </ProFormItem>
              </>
            );
          }
          if (bgType === BG_TYPE.image.value) {
            return (
              <>
                <ProFormItem name="bgColor" required>
                  <ColorPicker showText />
                </ProFormItem>
                <ProFormItem label="上传图片" name="bgImage" required>
                  <CommonUpload
                    folder={UPLOAD_FOLDER.LOTTERYDRAW}
                    maxSize={10240}
                    accept={['.jpg', '.png']}
                    needCrop={false}
                    extraInfo={false}
                  />
                </ProFormItem>
              </>
            );
          }
          return null;
        }}
      </ProFormDependency>
      <ProFormRadio.Group
        label="滚动设置"
        tooltip="背景是否跟随内容滚动"
        name="scrollType"
        required
        options={values(SCROLL_TYPE)}
        fieldProps={{
          optionType: 'button',
          buttonStyle: 'solid',
        }}
        rules={rules.scrollType}
      />
    </WrapperForm>
  );
};

export default PageForm;
